<div class="left">
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
    <hgroup class="hd">
        <img class="avatar" src="{{ site_url }}{{ profile_image }}"/>
        <div><span id="typed"></span></div>

        <script>
        const typed = new Typed('#typed', {
          strings: [
          {% for t in blog_typed %}
          '{{ t }}',
          {% endfor %}
          ],
          typeSpeed: 100,
          backSpeed: 10,
          backDelay: 100,
          startDelay: 1000,
          loop:true
    });
  </script>
        <ul class="sns-ul">
            {% for sns in blog_sns %}
            <li class="sns-li">
                <a href="{{ sns.url }}" target="_blank">
                    <i class="fa fa-{{ sns.ico }} "></i>
                </a>
            </li>
            {% endfor %}
        </ul>
    </hgroup>

    <!-- Search -->
    <input type="text" id="search-input" name="search" placeholder="JavaScript">
    <button id="search-btn" class="contrast"
            data-target="modal-example"
            onClick="toggleModal(event)">Search
    </button>


    <!-- Modal -->
    <dialog id="modal-example">
        <article>
            <a href="#close"
               aria-label="Close"
               class="close"
               data-target="modal-example"
               onClick="toggleModal(event)">
            </a>
            <h3>搜索结果</h3>
            <div id="modal" style="display: none;">
                <ul id="result-list"></ul>
            </div>
        </article>
    </dialog>
    <script src="{{ site_url }}assets/js/url.js"></script>
    <script src="{{ site_url }}assets/js/main.js"></script>
    <script src="{{ site_url }}assets/js/modal.js"></script>


    </div>